<template>
    <div class="goods-sdk-param">
        <div class="goods-sdk-param-list" ref="list"  >
            <div class="goods-sdk-param-item"  draggable="true" v-for="(item,index) in value" :data-drag="item.title">
                <bi-picture :src="item.image" upload width="60" height="60"  v-if="image"></bi-picture>
                <div class="goods-sdk-param-item-title">
                    {{item.title}}
                    <div class="goods-sdk-param-item-ctrl">
                        <bi-icon data="fa-edit icon-btn" @click="handleEdit(item,index)" ></bi-icon>
                        <bi-icon data="fa-close icon-btn " @click="handleDel(index)" ></bi-icon>
                    </div>
                </div>
            </div>

            
        </div>
        <bi-button  type="primary"  @click="handleEdit()"  >添加</bi-button>
    </div>
    
</template>

<script>
import goodsSkuParamEdit from './goods-sku-param-edit.vue';
import dragsort from  '@@/admin/assets/bi-plug/dragsort.js';
export default{
    emits: ['change'],
    data(){
        let value = this.list;
        return {
            value
        }
    },
    props:{
        title:String,
        image:{
            type:Boolean,
            default:false
        },
        list:{
            type:Array,
            default:[]
        },
    },
    methods:{
        handleEdit(item,index){
            let title = '添加参数';
            if (item){
                title = '编辑参数';
            }

            this.$dialog({
                type:'vue',
                title,
                content:admin.createApp(goodsSkuParamEdit,{item,image:this.image}),
                callback:(form,e)=>{
                    if (form){
                        console.log(form);
                        for(let i=0;i<this.value.length;i++){
                            if (this.value[i].title == form.title && index!=i){
                                this.$alert('参数已存在');
                                return false;
                            }
                        }

                        if (item){
                            this.value[index] = form;
                        }else{
                            this.value.push(form);
                        }

                        this.$emit('change',this.title,this.value);

                        return true;
                    }
                }
            })
        },
        handleDel(index){
            this.$confirm('确定删除',(confirm)=>{
                this.value.splice(index,1);
                this.$emit('change',this.title,this.value);
            });
        }
    },
    mounted(){
        let drager  = new dragsort(this.$refs.list,{
            callback:(value)=>{
                let list = [];
                value.map(title=>{
                    list.push(
                        this.value.find(item =>{
                            return item.title ==  title;
                        })
                    );
                });
                this.value = list;
                this.$emit('change',this.title,this.value);
            }
        });
    }
}    
</script>


<style>
.goods-sdk-param{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0px;
    align-items: center;
}
.goods-sdk-param-list{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0px;
    align-items: center;
}
.goods-sdk-param-item{
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 5px;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    background-color: #FFF;
}

.goods-sdk-param-item-title{
    font-size: 14px;
    position: relative;
    width: 100%;
    padding-right: 40px;
}

.goods-sdk-param-item-title .goods-sdk-param-item-ctrl{
    position: absolute;
    right: 0;
    top: 0;
    gap: 5px;
    display: flex;
    height: 100%;
    align-items: center;
}
</style>